<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 浅拷贝：针对于引用类型的数据进行赋值的一种操作概念，只针对于数组或对象的第一层数据进行赋值操作
        //1.循环赋值(循环浅拷贝)
        var arr=[1,2,3,4,['a','b']];
        var user={name:"tom",age:20,skills:["吃炸鸡","打游戏"]};
        
        function copy(obj){
            if((typeof obj)!="object"){
                return obj;
            }
            let result={};
            //判断数组是否实施一个数组，这个方法是ES5中的
            if(Array.isArray(obj)){
                result=[];
            }
            for(let i in obj){
                result[i]=obj[i];//result[4]=obj[4] obj2["skills"]=user["skills"]
            }
            return result;
        }
        var arrs2=copy(arr);
        arrs2[4][0]="baby";
        console.log(arrs2);
        console.log(arr);

        var obj2=copy(user);
        
        obj2["skills"][0]="吃烤鸭";
        console.log(obj2);
        console.log(user);

        //2. 解构赋值的浅拷贝
        let arrs=["alice","baby",["俊俊","薇薇"]];
        let [...arrays]=arrs;
        arrays[0]="嘻嘻";
        arrays[2][0]="张从伟";
        console.log(arrays);
        console.log(arrs);

        // 3.扩展运算符
        let arrs4=["aa","bb",["嘻嘻","哈哈"]];
        let arrs5=[...arrs4];
        console.log(arrs5);
        arrs5[2][0]="呵呵呵";
        console.log(arrs5);
        console.log(arrs4);

        //2.深拷贝：针对于引用类型进行赋值的一种操作概念，针对于数组或者对象的每一层数据进行赋值操作
        // (1).JSON内置的方法本身自带深度循环操作
        let arrs6=["我","你",["他","呵呵"]];
        var str=JSON.stringify(arrs6);
       
        var arrs7=JSON.parse(str);
        arrs7[2][0]="小金金";
        console.log(arrs7);
        console.log(arrs6);
        //(2)采用递归的方式
        let users={
            id:1,
            name:"tom",
            addr:{
                city:"南京"
            }
        };
        function deepCopy(o2,o1){
           
            for(let attr in o1){//
                if(typeof o1[attr]=="object"){
                    o2[attr]={};//o2["addr"]={};
                    deepCopy(o2[attr],o1[attr]);//deepCopy(o1["addr"]);

                }else{
                    o2[attr]=o1[attr];//o2["addr"]["city"]=o1["addr"]["city"]
                }
              
            }
            return o2;

        }
        let user2={};
        user2=deepCopy(user2,users);
        user2.addr.city="USA";
        console.log(user2);
        console.log(users);


    </script>
</head>
<body>
    
</body>
</html>